<template>
    <div class="dashboard-container">

      <!-- 内容栏 -->
      <div class="body">

        <!-- 列表 -->
        <el-table :data="list" v-loading="loading">
          <el-table-column label="id" prop="id"></el-table-column>
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="值" prop="value"></el-table-column>
          <el-table-column label="描述" prop="description"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button type="text" @click="handleAdd('update', row)">
                <i class="el-icon-edit-outline"></i>
                编辑
              </el-button>
              <!-- <el-button type="text danger" @click="handleDelete(row.id)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageIndex+1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageCount"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>

      <!-- 新增、编辑 -->
      <el-dialog 
        :visible.sync="dialogVisible" 
        :close-on-click-modal="false"
        @close="dialogVisible=false"
        :title="dialogType=='create'?'创建':'编辑'"
        width="600px"
      >
        <el-form ref="form" :rules="rules" :model="temp" label-width="100px">
          <el-form-item label="名称" prop="name">
            <el-input placeholder="请输入名称" v-model="temp.name"></el-input>
          </el-form-item>
          <el-form-item label="值" prop="value" v-if="temp.fileFlag!=1">
            <el-input placeholder="请输入值" v-model="temp.value"></el-input>
          </el-form-item>
          <el-form-item label="导入文件" prop="filePath" v-else>
              <div v-if="temp.value">
                <a :href="OSS_BASE_URL+temp.value" style="margin-right: 10px;">
                  <el-button type="text">模版下载</el-button>
                </a>
                <el-button type="text" style="color: red;" @click="temp.value=''">删除</el-button>
              </div>
              <el-upload
                class="upload-demo"
                name="file"
                :action="OSS_CONFIG.host"
                :before-upload="hanldeUpload"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess"
                :data="uploadData"
                :limit="1"
                accept=".xlsx"
            >
                <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit('form')">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import { runtimeConfigUpdate, runtimeConfigGetList } from '@/api/runtime'
import { OSS_BASE_URL } from '@/utils/common'
import { commonGetUploadFilePolicy } from '@/api/common'
  
export default {
    name: 'StaffruntimeConfig',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        OSS_BASE_URL,
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          type: [{ required: true, message: '请选择类型', trigger: 'blur' }]
        },
        params: {
          companyId: 1,
          pageCount: 10,
          pageIndex: 0,
          name: '',
        },
        total: 0,
        list: [],
        dialogVisible: false,
        dialogType: 'create',
        temp: {
          name: '',
          value: ''
        },
        loading: false,
        OSS_CONFIG: {
          accessid: '',
          dir: '',
          expire: '',
          host: '',
          policy: '',
          signature: ''
        },
        uploadData: {},
        fileList: [],
      }
    },
    mounted(){
      this.handleSearch();
      this.getOssConfig();
    },
  
    methods:{
      //文件上传成功
      handleAvatarSuccess(){
            this.temp.templateUrl = this.uploadData.key
      },
        //删除钩子
      handleRemove(file){
            this.temp.templateUrl =  '';
            this.fileList = [];
      },
       //图片上传前，签名处理
      hanldeUpload(file){
            let fileName = file.uid + '.' + file.name.split('.')[1]
            this.uploadData.name = fileName
            this.uploadData.key = this.OSS_CONFIG.dir + fileName
      },
      //获取Oss详情
      async getOssConfig(){
            let data = await commonGetUploadFilePolicy();
            this.OSS_CONFIG = data;
            this.uploadData = {
                policy: data.policy,
                OSSAccessKeyId: data.accessid,
                success_action_status: '200',
                signature: data.signature,
                key: data.dir,
                name: ''
            }
      },
      //提交表单
      submit(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if(this.dialogType =='create'){
              this.$message.success('创建成功')
            }else{
              await runtimeConfigUpdate(this.temp)
              this.$message.success('修改成功')
            }
            this.handleSearch();
            this.dialogVisible = false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 点击新增、编辑
      handleAdd(type, row){
        this.dialogType = type;
        this.dialogVisible = true;
        if(type=='create'){
          this.temp = {
            name: '',
            type: '',
          }
        }else{
          this.temp = JSON.parse(JSON.stringify(row))
        }
      },
      //修改搜索条件
      handleSearch(){
        this.params.pageIndex = 0;
        this.getData();
      },
      //加载列表数据
      async getData(){
        this.loading = true
        let data = await runtimeConfigGetList(this.params)
        this.loading = false;
        this.total = data.totalCount;
        this.list = data.list.map(item=>{
          return item;
        });
      },
      // 修改每页数量
      handleSizeChange(val){
        this.params.pageIndex = 0;
        this.params.pageCount = val;
        this.getData();
      },
      // 切换分页
      handleCurrentChange(val){
        this.params.pageIndex = val - 1;
        this.getData();
      }
    }
}
</script>
  
<style lang="scss" scoped>
.dashboard {
    &-container {
      margin: 30px;
      position: relative;
      .right{
        position: absolute;
        right: 0;
        top: 0;
      }

      .page{
        padding: 20px 0;
        text-align: center;
      }
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
}
</style>
  